<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <title>土地列表 - 吉象出海</title>
    <style>
        :root {
            --primary: #EAA82A;  /* 大象黄 - 品牌主色 */
            --secondary: #2E8B57; /* 森林绿 - 辅助色 */
            --danger: #D0021B;   /* 警示红 */
            --text: #374151;    /* 主要文字色 */
            --light-bg: #F8F9FA; /* 浅灰背景 */
            --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
            --land-green: #2E8B57; /* 土地主题绿色 */
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        
        body {
            background-color: #fff;
            color: var(--text);
            max-width: 428px;
            margin: 0 auto;
            padding-bottom: 80px;
        }
        
        /* 顶部品牌区 */
        .brand-header {
            text-align: center;
            padding: 12px 0;
            background: linear-gradient(to bottom, #ffffff, #F8F9FA);
            position: relative;
        }
        
        .brand-title {
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 4px;
        }
        
        .brand-subtitle {
            font-size: 12px;
            color: var(--text);
            letter-spacing: 2px;
            opacity: 0.8;
        }
        
        .rate-badge {
            position: absolute;
            right: 15px;
            top: 15px;
            background: var(--land-green);
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        /* 土地比价工具条 */
        .price-comparison-bar {
            background: linear-gradient(to right, var(--land-green), #4CAF50);
            color: white;
            padding: 12px 15px;
            text-align: center;
            font-size: 14px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .comparison-value {
            font-weight: 700;
            font-size: 16px;
            margin: 5px 0;
        }
        
        /* 三阶筛选器 */
        .land-filter {
            padding: 15px;
            background: var(--light-bg);
            border-bottom: 1px solid #e5e7eb;
        }
        
        .filter-steps {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .filter-step {
            flex: 1;
            background: white;
            border-radius: 20px;
            padding: 8px 12px;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            box-shadow: var(--card-shadow);
            position: relative;
            cursor: pointer;
            border: 1px solid #e5e7eb;
        }
        
        .filter-step.active {
            background: var(--land-green);
            color: white;
            border-color: var(--land-green);
        }
        
        .filter-step:after {
            content: ">";
            position: absolute;
            right: -8px;
            top: 50%;
            transform: translateY(-50%);
            color: #9CA3AF;
            font-weight: bold;
        }
        
        .filter-step:last-child:after {
            display: none;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }
        
        .filter-option {
            background: white;
            color: var(--text);
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 12px;
            border: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .filter-option.active {
            background: var(--land-green);
            color: white;
            border-color: var(--land-green);
        }
        
        .color-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
        }
        
        .color-yellow { background: #FFD700; }
        .color-purple { background: #800080; }
        
        /* 土地卡片 */
        .land-list {
            padding: 0 15px;
        }
        
        .land-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            margin-bottom: 20px;
            position: relative;
            border-top: 3px solid var(--land-green);
        }
        
        .land-card.featured {
            border-top: 3px solid var(--danger);
        }
        
        .land-header {
            padding: 15px 15px 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .land-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .land-tag {
            background: rgba(208, 2, 27, 0.1);
            color: var(--danger);
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
        }
        
        .land-location {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #6B7280;
            margin-bottom: 8px;
        }
        
        .land-location::before {
            content: "📍";
            margin-right: 4px;
        }
        
        .land-features {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }
        
        .land-feature {
            flex: 1;
            text-align: center;
            padding: 8px;
            background: rgba(46, 139, 87, 0.05);
            border-radius: 8px;
            font-size: 13px;
        }
        
        .feature-value {
            font-weight: 700;
            color: var(--land-green);
            margin-top: 4px;
        }
        
        .land-shape {
            width: 100%;
            height: 60px;
            background: #e5f5e9;
            border-radius: 4px;
            margin-top: 10px;
            position: relative;
            overflow: hidden;
        }
        
        .shape-rectangle {
            width: 80%;
            height: 40px;
            background: var(--land-green);
            border-radius: 4px;
            position: absolute;
            top: 10px;
            left: 10%;
        }
        
        .shape-lshape {
            width: 60%;
            height: 40px;
            background: var(--land-green);
            border-radius: 4px;
            position: absolute;
            top: 10px;
            left: 20%;
        }
        
        .shape-lshape:after {
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            background: var(--land-green);
            top: -15px;
            left: -15px;
            border-radius: 4px;
        }
        
        .land-price-section {
            padding: 15px;
        }
        
        .land-price {
            color: var(--danger);
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 5px;
        }
        
        .price-unit {
            font-size: 14px;
            color: #6B7280;
            margin-bottom: 10px;
        }
        
        .religion-indicator {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 12px;
            background: rgba(46, 139, 87, 0.1);
            color: var(--land-green);
            width: fit-content;
        }
        
        .indicator-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }
        
        .indicator-green { background: #4CAF50; }
        .indicator-yellow { background: #FFC107; }
        .indicator-red { background: #F44336; }
        
        .investment-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 10px 0;
        }
        
        .investment-tag {
            background: rgba(234, 168, 42, 0.1);
            color: var(--primary);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        .agent-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px dashed #e5e7eb;
        }
        
        .agent-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .agent-name {
            flex: 1;
            font-size: 13px;
            font-weight: 500;
        }
        
        .service-status {
            background: rgba(208, 2, 27, 0.1);
            color: var(--danger);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
        }
        
        .trust-badges {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            font-size: 12px;
            color: #6B7280;
            flex-wrap: wrap;
        }
        
        .trust-badge {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .view-land-btn {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background: var(--land-green);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(46, 139, 87, 0.3);
        }
        
      /* 优化后的底部导航菜单 */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: white;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    z-index: 1000;
    max-width: 428px;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
}

/* 修改后的底部导航项样式 */
.tab-bar a.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 5px 10px;
    min-height: 60px;
    border-radius: 16px;
    margin: 0 5px;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
    color: #495057;
}

.tab-item.active {
    background: rgba(234, 168, 42, 0.15);
    color: var(--primary);
}

.tab-item.active .tab-icon {
    color: var(--primary);
    transform: scale(1.1);
}

.tab-item.active .tab-label {
    font-weight: 600;
}

.tab-icon {
    font-size: 1.4rem;
    margin-bottom: 4px;
    transition: all 0.2s ease;
    color: #6c757d;
}

.tab-item.active .tab-icon {
    color: var(--primary);
}

.tab-label {
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}
        /* 平台验真标识 */
        .platform-verification {
            position: fixed;
            bottom: 60px;
            left: 0;
            right: 0;
            background: white;
            padding: 10px 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            display: flex;
            justify-content: space-around;
            font-size: 12px;
            color: #6B7280;
            max-width: 428px;
            margin: 0 auto;
            z-index: 90;
        }
        
        .verification-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
		  /* 全局链接样式 */
        a {
            color: inherit;
            text-decoration: none;
        }
		.shape-rectangle {
    background: #2E8B57; /* 直接定义颜色代替变量 */
    background: var(--land-green); /* 现代浏览器会优先使用这一行 */
}

/* 分享信息样式 */
.share-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    margin-top: 5px;
    color: var(--text);
}

.share-icon {
    font-size: 16px;
}

.share-text {
    font-weight: 500;
    color: #2E8B57;
    position: relative;
    padding-right: 8px;
}

.share-text:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    width: 1px;
    background: #ddd;
}

.share-subtext {
    opacity: 0.8;
}

    </style>
</head>
<body>
    <!-- 顶部品牌区域 -->
<header class="brand-header">
 <a href="home.html" class="back-button" style="position: absolute; left: 15px; top: 15px; font-size: 20px; color: var(--text);">
        <i class="fas fa-arrow-left"></i>
    </a>
    <div class="brand-title">吉象出海</div>
    <div class="share-info">

        <span class="share-subtext">泰国专业房地产服务平台</span>
    </div>
</header>
    
    <!-- 土地比价工具条 -->
    <div class="price-comparison-bar">
        <div>泰国土地区域均价参考</div>
        <div class="comparison-value">春武里: 85万泰铢/莱 | 罗勇: 62万泰铢/莱</div>
        <div>（数据更新于今日）</div>
    </div>
    
    <!-- 三阶筛选器 -->
    <section class="land-filter">
        <div class="filter-steps">
            <div class="filter-step active">土地类型</div>
            <div class="filter-step">核心指标</div>
            <div class="filter-step">高级筛选</div>
        </div>
        
        <div class="filter-options">
            <div class="filter-option active">全部</div>
            <div class="filter-option">住宅</div>
            <div class="filter-option">商业</div>
            <div class="filter-option">农业</div>
            <div class="filter-option">工业</div>
        </div>
    </section>
    
    <!-- 土地列表 -->
    <div class="land-list">
        <!-- 土地卡片 1 -->
        <div class="land-card featured">
            <div class="land-header">
                <div class="land-title">
                    <span>🌾 罗勇 2009莱 | 临街18米</span>
                    <span class="land-tag">可分割</span>
                </div>
                <div class="land-location">罗勇府-Pluak Daeng · 距政府中心15公里</div>
                
                <div class="land-features">
                    <div class="land-feature">
                        <div>地块数量</div>
                        <div class="feature-value">37块</div>
                    </div>
                    <div class="land-feature">
                        <div>临街面宽</div>
                        <div class="feature-value">18米</div>
                    </div>
                    <div class="land-feature">
                        <div>地形</div>
                        <div class="feature-value">长方形</div>
                    </div>
                </div>
                
            <div style="margin-top:10px; font-size:14px; color:#2E8B57 ;">
      <span class="share-icon">👤</span>
        <span class="share-text">一叙正为您分享</span>
</div>
            </div>
            
            <div class="land-price-section">
                <div class="land-price">130,585万泰铢</div>
                <div class="price-unit">65万泰铢/莱（首付30%）</div>
                
                <div class="religion-indicator">
                    <span class="indicator-dot indicator-green"></span>
                    宗教友好（距寺庙>2km）
                </div>
                
                <div class="investment-tags">
                    <div class="investment-tag">🏆 高回报: >7%</div>
                    <div class="investment-tag">⚡ 快周转</div>
                    <div class="investment-tag">🛣️ 临主路</div>
                </div>
                
				
				
				
                <div class="agent-info">
                    <div class="agent-avatar">👤</div>
                    <div class="agent-name">张中介 · 服务分96</div>
                    <div class="service-status">3组客户预约中</div>
                </div>
                
                <div class="trust-badges">
                    <div class="trust-badge">✅ 地契验真</div>
                    <div class="trust-badge">📅 今日更新</div>
                    <div class="trust-badge">🔒 资金监管</div>
                </div>
                
                <div class="view-land-btn">预约看地</div>
            </div>
        </div>
        
        <!-- 土地卡片 2 -->
        <div class="land-card">
            <div class="land-header">
                <div class="land-title">
                    <span>🌾 春武里 21莱 | 临街15米</span>
                    <span class="land-tag">可分割</span>
                </div>
                <div class="land-location">春武里 · 紧邻331公路 · 距公路200米</div>
                
                <div class="land-features">
                    <div class="land-feature">
                        <div>土地颜色</div>
                        <div class="feature-value">
                            <span class="color-indicator color-yellow"></span> 黄色
                        </div>
                    </div>
                    <div class="land-feature">
                        <div>临街面宽</div>
                        <div class="feature-value">15米</div>
                    </div>
                    <div class="land-feature">
                        <div>地形</div>
                        <div class="feature-value">L形</div>
                    </div>
                </div>
                
            <div style="margin-top:10px; font-size:14px; color:#2E8B57 ;">
      <span class="share-icon">👤</span>
        <span class="share-text">一叙正为您分享</span>
</div>
            </div>
            
            <div class="land-price-section">
                <div class="land-price">7,350万泰铢</div>
                <div class="price-unit">350万泰铢/莱（首付40%）</div>
                
                <div class="religion-indicator">
                    <span class="indicator-dot indicator-green"></span>
                    宗教友好（距寺庙1.5km）
                </div>
                
                <div class="investment-tags">
                    <div class="investment-tag">🏆 高回报: >8%</div>
                    <div class="investment-tag">⚡ 快周转</div>
                    <div class="investment-tag">🏭 BOI资质</div>
                </div>
                
                <div class="agent-info">
                    <div class="agent-avatar">👤</div>
                    <div class="agent-name">李中介 · 服务分92</div>
                    <div class="service-status">最后1块</div>
                </div>
                
                <div class="trust-badges">
                    <div class="trust-badge">✅ 地契验真</div>
                    <div class="trust-badge">📅 今日更新</div>
                    <div class="trust-badge">🔒 资金监管</div>
                </div>
                
                <div class="view-land-btn">预约看地</div>
            </div>
        </div>
        
        <!-- 土地卡片 3 -->
        <div class="land-card">
            <div class="land-header">
                <div class="land-title">
                    <span>🌾 春武里 518莱 | 临街22米</span>
                </div>
                <div class="land-location">春武里 · 紧邻331号公路 · 距工业区500米</div>
                
                <div class="land-features">
                    <div class="land-feature">
                        <div>土地颜色</div>
                        <div class="feature-value">
                            <span class="color-indicator color-yellow"></span> 黄色
                        </div>
                    </div>
                    <div class="land-feature">
                        <div>临街面宽</div>
                        <div class="feature-value">22米</div>
                    </div>
                    <div class="land-feature">
                        <div>地形</div>
                        <div class="feature-value">长方形</div>
                    </div>
                </div>
            <div style="margin-top:10px; font-size:14px; color:#2E8B57 ;">
      <span class="share-icon">👤</span>
        <span class="share-text">一叙正为您分享</span>
</div>
              
            </div>
            
            <div class="land-price-section">
                <div class="land-price">93,240万泰铢</div>
                <div class="price-unit">180万泰铢/莱（首付50%）</div>
                
                <div class="religion-indicator">
                    <span class="indicator-dot indicator-yellow"></span>
                    宗教敏感（距寺庙800m）
                </div>
                
                <div class="investment-tags">
                    <div class="investment-tag">🏭 BOI资质</div>
                    <div class="investment-tag">⚠️ 需审批</div>
                    <div class="investment-tag">🏗️ 工业用地</div>
                </div>
                
                <div class="agent-info">
                    <div class="agent-avatar">👤</div>
                    <div class="agent-name">王经理 · 服务分89</div>
                    <div class="service-status">带看预约中</div>
                </div>
                
                <div class="trust-badges">
                    <div class="trust-badge">✅ 地契验真</div>
                    <div class="trust-badge">📅 今日更新</div>
                    <div class="trust-badge">🔒 资金监管</div>
                </div>
                
                <div class="view-land-btn">预约看地</div>
            </div>
        </div>
    </div>
    
    <!-- 平台验真标识 -->
    <div class="platform-verification">
        <div class="verification-item">✅ 平台验真</div>
        <div class="verification-item">🔒 资金监管</div>
        <div class="verification-item">📜 产权保障</div>
        <div class="verification-item">🛡️ 法律支持</div>
    </div>
    
    <!-- 底部导航菜单 -->
    <div class="tab-bar">
        <a href="home.html" class="tab-item active">
            <div class="tab-icon"><i class="fas fa-home"></i></div>
            <div class="tab-label">首页</div>
        </a>
        <a href="message.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-comment-dots"></i></div>
            <div class="tab-label">消息</div>
        </a>
        <a href="postlist.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-plus-circle"></i></div>
            <div class="tab-label">发布</div>
        </a>
        <a href="entrust.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-handshake"></i></div>
            <div class="tab-label">委托</div>
        </a>
        <a href="profile.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-user"></i></div>
            <div class="tab-label">我的</div>
        </a>
    </div>
    
    <script>
	        // 底部导航交互
        document.querySelectorAll('.tab-bar a.tab-item').forEach(item => {
            item.addEventListener('click', function(e) {
                if(this.classList.contains('active')) {
                    e.preventDefault();
                }
                document.querySelectorAll('.tab-bar a.tab-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
            });
        });
        // 筛选功能
        document.querySelectorAll('.filter-option').forEach(option => {
            option.addEventListener('click', function() {
                this.classList.toggle('active');
            });
        });
        
        // 预约看地按钮动画
        document.querySelectorAll('.view-land-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                    alert('看地预约成功！土地顾问将联系您');
                }, 200);
            });
        });
        
        // 卡片点击跳转详情页
        document.querySelectorAll('.land-card').forEach(card => {
            card.addEventListener('click', function() {
                window.location.href = 'landdetails.html';
            });
        });
        
        // 汇率实时更新模拟
        function updateRate() {
            const rate = (5.2 + (Math.random() * 0.02 - 0.01)).toFixed(2);
            document.querySelector('.rate-badge').textContent = `1¥=${rate}฿`;
        }
        setInterval(updateRate, 5000);
    </script>
</body>
</html>